<template>
  <div>
    <el-form
      :model="formData"
      inline
      class="myForm"
    >
      <el-form-item>
        <el-button @click="openDialog('创建', 'add', null)" type="primary" icon="el-icon-edit">添加</el-button>
      </el-form-item>
    </el-form>

    <el-table
      v-loading="tableLoading"
      :data="tableData"
      border
      row-key="id"
      :tree-props="{children: 'children'}"
      class="myTab"
    >
      <el-table-column align="center" label="类目id" prop="id"></el-table-column>
      <el-table-column align="center" label="类目名" prop="name"></el-table-column>
      <el-table-column align="center" label="类目图标" prop="iconUrl">
    <template slot-scope="scope">
      <img :src="scope.row.iconUrl" width="80">
    </template>
      </el-table-column>
      <el-table-column align="center" label="类目图片" prop="picUrl">
        <template slot-scope="scope">
      <img :src="scope.row.picUrl" width="80">
    </template>
      </el-table-column>
      <el-table-column align="center" label="关键字" prop="keywords"></el-table-column>
      <el-table-column align="center" label="简介" prop="desc"></el-table-column>
      <el-table-column align="center" label="级别" prop="level">
         <template slot-scope="scope">
          <el-tag>
            {{ scope.row.level === "L1" ? "一级类目" : "二级类目" }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center" width="260px">
        <template slot-scope="scope">
          <el-button @click="openDialog('编辑', 'edit', scope.row)" type="primary">编辑</el-button>
          <el-button @click="deleteData(scope.row)" type="danger">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
      :visible.sync="dialogVisible"
      :title="dialogTitle"
      width="500"
    >
      <el-form ref="dialogForm" :rules="formRules" :model="dialogFormData" label-width="100px" class="myDal">
        <el-form-item label="类目名称" prop="name">
          <el-input v-model="dialogFormData.name" class="input1"></el-input>
        </el-form-item>
        <el-form-item label="关键字" prop="keywords">
          <el-input v-model="dialogFormData.keywords" class="input1"></el-input>
        </el-form-item>
        <el-form-item label="级别" prop="level" >
          <el-select v-model="dialogFormData.level" class="input1">
            <el-option label="一级类目" value="L1"></el-option>
            <el-option label="二级类目" value="L2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="dialogFormData.level === 'L2'" label="父类目" prop="pid">
          <el-select v-model="dialogFormData.pid"  style="margin-left: 40px;">
            <el-option
              v-for="(item, index) in levelOptions"
              :key="index"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="类目图标" prop="iconUrl">
          <!-- 1.action属性http://192.168.200.251:8888/admin/storage/create -->
          <!-- 2.headers --- :headers="{'Shopping-Admin-Token': token}" -->
          <!-- 3.回调函数赋值 -->
          <el-upload
            class="avatar-uploader"
            action="http://192.168.200.251:8888/admin/storage/create"
            :show-file-list="false"
            :on-success="iconUrlSuccess"
            :headers="{'Shopping-Admin-Token': token}"
            style="">
            <img v-if="dialogFormData.iconUrl" :src="dialogFormData.iconUrl" style="width: 100px; margin-left: 40px;">
            <i
              v-else
              class="el-icon-plus avatar-uploader-icon"
              style="width:100px;height: 100px;border-radius: 10px;border: 2px dashed #ddd;line-height: 100px; margin-left: 40px;"
            >
            </i>
          </el-upload>
        </el-form-item>
        <el-form-item label="类目图片" prop="picUrl">
          <el-upload
            class="avatar-uploader"
            action="http://192.168.200.251:8888/admin/storage/create"
            :show-file-list="false"
            :on-success="picUrlSuccess"
            :headers="{'Shopping-Admin-Token': token}">
            <img v-if="dialogFormData.picUrl" :src="dialogFormData.picUrl" style="width: 100px; margin-left: 40px;">
            <i
              v-else
              class="el-icon-plus avatar-uploader-icon"
              style="width:100px;height: 100px;border-radius: 10px;border: 2px dashed #ddd;line-height: 100px;margin-left: 40px;"
            >
            </i>
          </el-upload>
        </el-form-item>
        <el-form-item label="类目简介" prop="desc">
          <el-input v-model="dialogFormData.desc" class="input1"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button @click="confirm" type="primary">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'shopCategory',
  componentTitle: '商品类目',
  data () {
    return {
      token: sessionStorage.getItem('Shopping-Admin-Token'),
      tableLoading: false,
      dialogVisible: false,
      dialogTitle: '创建',
      dialogType: 'add',
      dialogFormData: {
        name: '',
        keywords: '',
        level: 'L2',
        iconUrl: '',
        picUrl: '',
        desc: '',
        pid: ''
      },

      formData: {
        question: ''
      },
      tableData: [],
      formRules: {
        name: [
          {required: true, message: '类目名不能为空', trigger: 'change'}
        ],
      },
      levelOptions: [
        
      ],
    }
  },
  mounted () {
    this.search()
    this.getLevelOptions()
  },

  methods: {
    getLevelOptions () {
      axios({
        url: 'http://192.168.200.251:8888/admin/category/l1',
        method: 'get',
        headers: {
          'Shopping-Admin-Token': sessionStorage.getItem('Shopping-Admin-Token')
        }
      }).then(res => {
        this.levelOptions = res.data.data.list
        console.log(res)
      })
    },
    openDialog (title, type, row) {
      console.log(row)
      this.dialogVisible = true
      this.dialogType = type
      this.dialogTitle = title

      if (type === 'edit') {
        this.$nextTick(() => {
          this.dialogFormData = Object.assign({}, row)
        })
      }
    },
    confirm () {
      this.$refs.dialogForm.validate(valid => {
        if (valid) {
          if (this.dialogType === 'add') {
            this.addData()
          } else if (this.dialogType === 'edit') {
            this.editData()
          }
        } else {
          return false
        }
      })

    
    },
    cancel () {
      this.$refs.dialogForm.resetFields()
      this.dialogVisible = false
    },
    // 上传图片成功的回调函数
    iconUrlSuccess (res, file) {
      console.log(res)
      this.dialogFormData.iconUrl = res.data.url.replace(/localhost:8888/g, '192.168.200.251:8888')
      // this.dialogFormData.iconUrl = res.data.url.replace(/localhost:8888/g, '192.168.200.251:8888')
      console.log(this.dialogFormData)
    },
    picUrlSuccess (res, file) {
      // 
      this.dialogFormData.picUrl = res.data.url.replace(/localhost:8888/g, '192.168.200.251:8888')
      // this.dialogFormData.picUrl = res.data.url.replace(/localhost:8888/g, '192.168.200.251:8888')
    },
    // 添加接口
    addData () {
      axios({
        url: 'http://192.168.200.251:8888/admin/category/create',
        method: 'post',
        data: {
          ...this.dialogFormData,
          pid: String(this.dialogFormData.level) === '1' ? 0 : this.dialogFormData.pid
        },
        headers: {
          'Shopping-Admin-Token': sessionStorage.getItem('Shopping-Admin-Token')
        }
      }).then(res => {
        if (res.data.errno === 0) {
          this.cancel()
          this.$notify.success({title: '添加成功'})

          this.search()
        } else {
          this.$notify.error({title: '添加失败'})
        }
      })
    },
    // 编辑接口
    editData () {
      axios({
        url: 'http://192.168.200.251:8888/admin/category/update',
        method: 'post',
        data: {
          ...this.dialogFormData
        },
        headers: {
          'Shopping-Admin-Token': sessionStorage.getItem('Shopping-Admin-Token')
        }
      }).then(res => {
        if (res.data.errno === 0) {
          this.cancel()
          this.$notify.success({title: '编辑成功'})

          this.search()
        } else {
          this.$notify.error({title: '编辑失败'})
        }
      })
    },
    deleteData (row) {
      this.$confirm('此操作将删除该问题, 是否继续?').then(() => {
        axios({
          url: 'http://192.168.200.251:8888/admin/category/delete',
          method: 'post',
          data: row,
          headers: {
            'Shopping-Admin-Token': sessionStorage.getItem('Shopping-Admin-Token')
          }
        }).then(res => {
          this.$notify.success({title: '删除成功'})
  
          this.search()
        })
      })
    },
    search () {
      this.tableLoading = true

      axios({
        url: 'http://192.168.200.251:8888/admin/category/list',
        method: 'get',
        headers: {
          'Shopping-Admin-Token': sessionStorage.getItem('Shopping-Admin-Token')
        }
      }).then(res => {
        this.tableLoading = false
        this.tableData = res.data.data.list
        console.log(res.data.data.list.level);
        

      })
    },
    // 每页多少条切换
    handleSizeChange (value) {
      this.pageInfo.limit = value

      this.search()
    },
    // 当前页码的切换
    handleCurrentChange (value) {
      this.pageInfo.page = value

      this.search()
    }
  }
}
</script>

<style lang="scss" scoped>


.myForm{
display: flex;
justify-content: flex-end; 
margin-top: 30px;
margin-right: 22px;
}

.myTab{
  width: 95%;
  text-align: center;
  margin: 0 auto;
}

.myDal{
  .input1{
    width:340px; 
    margin-left: 40px;
  }
}


</style>
